<template>
  <div ref="t6">
    <div
      class="print-wrap-210 print-wrap-normal"
      style="width:210mm; height: auto;
  font-size: 12px;
  padding: 10px;
  border: 1px solid #a5a5a5;
  box-shadow: 2px 2px 2px #d3d3d3;
  word-break: break-all;"
    >
      <div style="text-align:center; ">
        <h2 class="hotelname">
          {{ seller?seller.sellerName : '酒店' }}
          <span>结账单</span>
        </h2>
        <!-- <div class="logogstate">
                <span><span class="printtimeslabel">打印次数: </span></span>
            </div> -->
      </div>
      <div style="font-weight:bold;">
        <span>{{ ftype }}</span>
        <span style="float:right;">NO.{{ info ? info.singleEntity.closingNo : 'J20191024000001' }}</span>
      </div>

      <p class="panelone panelone2" style="clear:both;">
        <span>姓名/Name:</span>
        <span style="width: 30mm; flex: 0 0 auto;">{{ info ? info.peopleEntity.name : '貂蝉' }}</span>
        <span style="width: 30mm;">房间号/RoomNo:</span>
        <span>{{ info ? info.floorRoomEntity.roomSign : '' }}{{ info ? info.floorRoomEntity.roomNum : '6319' }}</span>
        <span style="width: 35mm;">房型/Type：</span>
        <span>{{ info ? info.roomEntity.name : '大床房' }}</span>
        <span style="width: 35mm;">房价/Price:</span>
        <span>{{ info ? (priceMap[today] ? priceMap[today] : currData) : '198' }}</span>
      </p>


      <p class="panelone panelone2" style="clear:both;">
        <span>到日/CheckIn:</span>
        <span style="width: 30mm; flex: 0 0 auto;">{{ info ? info.singleEntity.arrivalsTime : '2019-08-31 09:34' }}</span>

        <span style="width: 35mm;">离日/CheckOut:</span>
        <span>{{ info ? info.singleEntity.predissociationTime : '2019-09-01 02:00' }}</span>

        <span>天数/Days:</span>
        <span>{{ info ? info.singleEntity.days : '1' }}</span>
      </p>

      <p class="panelone panelone2" style="clear:both;">
        <span>会员/Member:</span>
        <span v-if="info">
          <span v-if="info.singleEntity.sourceType == 1">{{memberLevelDetailEntity.levelName}}</span>
          <span v-else>非会员</span>
        </span>
        <span v-else>非会员</span>

        <template v-if="info && info.singleEntity.sourceType == 1">
          <span>卡号: </span>
          <span>{{memberLevelDetailEntity.cardJustNo}}</span>
          <span>积分: </span>
          <span>{{memberLevelDetailEntity.score}}</span>
          <span>余额: </span>
          <span>{{memberLevelDetailEntity.balance}}</span>
        </template>

        <span style="width: 35mm;">协议单位/Company:</span>
        <span>无</span>
      </p>

      <table style="width:100%;font-size:13px;margin-bottom: 3px; " class="dastable">
        <tr>
          <td>房间号/No</td>
          <td>项目/Project</td>
          <td>发生时间/Time</td>
          <td>收款/Pay Amount</td>
          <td>费用/Cost</td>
          <td>付款方式/Pay Type</td>
        </tr>
        <tr>
          <td colspan="6"><hr style="border:1px dashed #000; height:1px" /></td>
        </tr>
        <tr v-for="item in financeData2" :key="item.id">
          <td style="height:5mm;">{{ info ? info.floorRoomEntity.roomSign : '' }}{{ info ? info.floorRoomEntity.roomNum : '6319' }}</td>
          <td>
            <div v-if="item.payType == 0"><span>预收账款</span></div>
            <div v-if="item.payType == 1"><span>预授权</span></div>
            <div v-if="item.payType == 2">
              <span>{{ item.consumeName }}</span>
            </div>
            <div v-if="item.payType == 3"><span>押金</span></div>
            <div v-if="item.payType == 4"><span>房费</span></div>
            <div v-if="item.payType == 5"><span>预收退款</span></div>
            <div v-if="item.payType == 6"><span>结账收款</span></div>
            <div v-if="item.payType == 7"><span>结账退款</span></div>
            <div v-if="item.payType == 8"><span>退押金</span></div>
            <div v-if="item.payType == 9"><span>冲账</span></div>
          </td>
          <td>{{ item.creatTime }}</td>
          <td>
            <span v-if="item.payType == 0 || item.payType == 3 || item.payType == 6 || item.payType == 5 || item.payType == 7 || item.payType == 8 || item.payType == 9">
              <span v-if="item.payType == 8 || item.payType == 5 || item.payType == 7">-</span>
              {{ item.payPrice }}
            </span>
          </td>
          <td>
            <span v-if="item.payType == 2 || item.payType == 4">{{ item.payPrice }}</span>
          </td>
          <td>
            <span v-if="item.nowTypeName">{{ item.nowTypeName }}</span>
            <span v-else>--</span>
          </td>
        </tr>
        <tr class="lastrow"><td colspan="6"></td></tr>
        <tr>
          <td colspan="6"><hr style="border:1px dashed #000; height:1px" /></td>
        </tr>
        <tr>
          <td colspan="3" style="text-align:right;">合计:</td>
          <td>{{ info ? sum2 : '700' }}</td>
          <td>{{ info ? sum1 : '169' }}</td>
          <td></td>
        </tr>
      </table>

      <div style="border-bottom:1px solid #000;">
        <p style="margin-bottom: 10px;">
          <span style="width: 50mm;font-size: 15px;text-align: right;display: inline-block;">客人签名/Guest Signture:</span>
          <span style="width: 40mm;" class="inputspan"></span>
        </p>

        <div v-html="note"></div>
      </div>

      <div style="margin-top:5px;">
        <p style="float:right;">
          Page No.页码:
          <span tdata="pageNO">##</span>
        </p>
        <p class="panelone">
          <span>酒店地址:</span>
          <span>{{ seller ? seller.address : '模板' }}</span>
          <span>预定电话:</span>
          <span>{{ seller ? seller.tel : '模板' }}</span>
        </p>
        <p class="panelone">
          <span>打印人:</span>
          <span>{{ user ? user.username : '模板' }}</span>
          <span style="width: auto;">打印时间(Print Time):</span>
          <span style="width:50mm;flex: none;">{{ nowDate + ' ' + nowTime + ' ' + nowWeek }}</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
export default {
  props: ['note', 'info', 'priceMap', 'currData', 'financeData'],
  watch: {
    financeData(newV, oldV) {
      // do something
      this.financeData = newV;
      this.$nextTick(() => {
        this.sum();
      });
    },
    deep: true
  },
  data() {
    return {
      financeData: [],
      financeData2: [],
      nowDate: '', // 当前日期
      nowTime: '', // 当前时间
      nowWeek: '', // 当前星期
      today: moment().format('YYYY-MM-DD'),
      user: {},
      seller: {},
      memberLevelDetailEntity:{
        levelName:'',
        cardJustNo:'',
        score:'',
        balance:'',
      },
      sum1: 0,
      sum2: 0,
      dataList: [],
      ftype: '',
      payTypes: ['预收账款', '信用卡授权', '消费', '押金', '房费', '预收退款', '结账收款', '结账退款', '退押金']
    };
  },
  methods: {
    initFinanceData(data){
      this.financeData2 = data
      this.sum();
      this.$forceUpdate();
    },
    initMemberLevelDetailEntity(data){
      this.memberLevelDetailEntity = data
    },
    currentTime() {
      setInterval(this.getDate, 500);
    },
    getUser() {
      this.$http({
        url: this.$http.adornUrl(`/hotel/thotelprinttemplate/printInfo`),
        method: 'get'
      }).then(({ data }) => {
        if (data.code === 0) {
          this.user = data.user;
          this.seller = data.seller;
        }
      });
    },
    sum() {
      this.sum1 = 0;
      this.sum2 = 0;
      this.financeData2.forEach(element => {
        if (this.sum1 == 0) {
          if (element.type == 0) {
            this.ftype = '未结';
          }
          if (element.type == 1) {
            this.ftype = '已结';
          }
          if (element.type == 2) {
            this.ftype = '已转';
          }
        }
        if (element.payType == 2 || element.payType == 4) {
          this.sum1 += element.payPrice;
        }
        if (element.payType == 0 || element.payType == 3 || element.payType == 6 || element.payType == 5 || element.payType == 7 || element.payType == 8 || element.payType == 9) {
          if (element.payType == 8 || element.payType == 5 || element.payType == 7 || element.payType == 9) {
            this.sum2 += -element.payPrice;
          } else {
            this.sum2 += element.payPrice;
          }
        }
      });
    },
    getDate: function() {
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let week = new Date().getDay();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      if (week == 1) {
        this.nowWeek = '星期一';
      } else if (week == 2) {
        this.nowWeek = '星期二';
      } else if (week == 3) {
        this.nowWeek = '星期三';
      } else if (week == 4) {
        this.nowWeek = '星期四';
      } else if (week == 5) {
        this.nowWeek = '星期五';
      } else if (week == 6) {
        this.nowWeek = '星期六';
      } else {
        this.nowWeek = '星期日';
      }
      _this.nowTime = hh + ':' + mf;
      _this.nowDate = yy + '/' + mm + '/' + dd;
    }
  },
  mounted() {
    this.currentTime();
    if (this.info) {
      this.currData = this.priceMap[moment(this.info.peopleEntity.arrivalsTime).format('YYYY-MM-DD')];
    }
    this.getUser();
  }
};
</script>

<style>
.panelone {
  display: flex;
}
.panelone span:nth-child(2n + 1) {
  width: 23mm;
  text-align: right;
}
</style>
